<template>
  <div class="gentle-content-wrapper">
    <div style="width: 100%;height:100%;overflow-y:scroll;">
      <div class="flex" style="width: 100%;background-color: #ebeef5;padding-bottom:10px;" v-for="index in 10" :key="index">
        <a-card v-for="(item, index) in growCardLists" :key="index"
          class="md:w-1/4 w-full !md:mt-0 !md:mr-10px" :title="item.title" style="background-color: #cecece;">
          <template #extra>
            {{item.state == 1?'运行':item.state == 0?'待机':'失去链接'}} {{ item.time }}
          </template>
          <p style="font-size: 16px; padding: 5px 10px;font-weight: 600">{{ item.name }}</p>
          <p style="font-size: 14px; padding:0 10px 5px 10px;">{{ item.type }}</p>
          <div style="display: flex; justify-content: space-between;border-left:5px solid blue;padding: 5px;color: #B0C4DE;background-color: #ffffff">
            <span>布长 {{ item.long }} m</span>
            <span>速度 {{ item.speed }}</span>
          </div>
          <p style="font-size: 13px; padding:5px 10px;">工人:{{ item.operator }}</p>
          <div v-if="item.state == 2" class="overlay"></div>
        </a-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>

interface GrowCardItem {
  title?: string;
  name?: string,
  state?: number,
  time?: string,
  type?: string,
  long?: number,
  speed?: number,
  operator?: string,
}
const growCardLists: GrowCardItem[] = [
  {
    title: 'JOO1#',
    name: "J1232132141",
    state: 0,
    time: "00:54:54",
    type:'割绒',
    long: 356,
    speed:1804,
    operator:"张三",
  },
  {
    title: 'JOO2#',
    name: "J2232132141",
    state: 1,
    time: "00:54:54",
    type:'2.5毛超柔',
    long: 656,
    speed:1804,
    operator:"李四",

  },
  {
    title: 'JOO3#',
    name: "J3232132141",
    state: 2,
    time: "00:54:54",
    type:'2.5毛超柔',
    long: 456,
    speed:1804,
    operator:"王五",
  },
  {
    title: 'JOO4#',
    name: "J4232132141",
    state: 1,
    time: "00:54:54",
    type:'割绒',
    long: 456,
    speed:1804,
    operator:"嘻嘻嘻",

  }
];

</script>
<style lang="less" scoped>
/deep/ .ant-card-head-wrapper{
  background-color: #00847c;
  padding:4px 0;
}
/deep/ .ant-card-extra,
/deep/ .ant-card-head-title{
  padding:0 10px;
  font-size:14px;
  color:#ffffff;
}

/deep/ .ant-card-head{
  padding:0;
  min-height: 15px;
  position: relative;
  z-index: 1;
  border: none;
}
/deep/ .ant-card-body{
  padding:0;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; /* 可根据需要调整字体大小 */
}
</style>
